<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

interface Links {
  routeName: string;
  title: string;
  active: boolean;
  img: string;
}
const isActive = (link: Links) => {
  link.active = true;
  for (let item of lingks.value) {
    if (item.routeName == link.routeName) {
      item.active = true;
    } else {
      item.active = false;
    }
  }
};

const lingks = ref<Links[]>([
  {
    routeName: "user_manage",
    title: "用户管理",
    active: false,
    img: new URL("@/assets/5.jpg", import.meta.url).href,
  },
  {
    routeName: "ecn1",
    title: "设置",
    img: new URL("@/assets/1.jpg", import.meta.url).href,
    active: false,
  },
]);
const toPage = (link: Links) => {
  isActive(link);
  router.push({
    path: `/user_manage`,
  });
};
</script>
<template>
  <div class="base-manage-sidebar-container">
    <!-- 用户 -->
    <div class="base-manage-sidebar-user">
      <img src="@/assets/101.jpg" alt="" />
    </div>
    <!--  模块 -->
    <div class="base-manage-sidebar-module">
      <template v-for="item of lingks" :key="item.routeName">
        <div class="base-manage-sidebar-module-item" @click="toPage(item)">
          <div class="base-manage-sidebar-module-item-icon">
            <img :src="item.img" alt="" />
          </div>
          <div :class="{ active: item.active }">
            {{ item.title }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<style scoped lang="scss">
.base-manage-sidebar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  height: 100%;
  padding: 10px 0;
  background-color: #333;
  color: #fff;
}
.base-manage-sidebar-user {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.base-manage-sidebar-user img {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.base-manage-sidebar-module {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.base-manage-sidebar-module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}
.base-manage-sidebar-module-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.base-manage-sidebar-module-item-icon img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.base-manage-sidebar-module-item .active {
  color: rgb(138, 228, 2);
}
</style>
